<div class="step">
    <div class="row g-0 step-header">
        <div class="col-auto">
            <button
                class="btn btn-text-secondary btn-initial me-1"
                [class.active]="step.name === workflow.dto.initial"
                [class.enabled]="step.name !== workflow.dto.initial && !step.isLocked"
                (click)="makeInitial()"
                [disabled]="step.name === workflow.dto.initial || step.isLocked || disabled">
                @if (!step.isLocked) {
                    <i class="icon-arrow-right text-decent"></i>
                }
            </button>
        </div>

        <div class="col-auto color pe-2">
            <sqx-color-picker
                [disabled]="$any(disabled)"
                mode="Circle"
                [ngModel]="step.values.color"
                (ngModelChange)="changeColor($event)"
                [ngModelOptions]="onBlur" />
        </div>

        <div class="col">
            <sqx-editable-title
                [disabled]="step.isLocked || disabled"
                [inputTitle]="step.name"
                (inputTitleChange)="changeName($event)"
                inputTitleLength="100" />
        </div>

        <div class="col"></div>

        @if (step.isLocked) {
            <div class="col-auto">
                <small class="text-decent">({{ "workflows.publishedNotRemovable" | sqxTranslate }})</small>
            </div>
        }

        <div class="col-auto">
            @if (!step.isLocked && workflow.steps.length > 2) {
                <button class="btn btn-text-danger" (click)="remove()" [disabled]="disabled" type="button">
                    <i class="icon-bin2"></i>
                </button>
            }
        </div>
    </div>

    <div class="step-inner">
        @for (transition of transitions; track transition.to) {
            <sqx-workflow-transition
                [disabled]="disabled"
                (remove)="removeTransition(transition.to)"
                [roles]="roles"
                [transition]="transition"
                (update)="update.emit($event)"
                [workflow]="workflow" />
        }

        @if (openSteps.length > 0 && !disabled) {
            <div class="row transition g-0">
                <div class="col col-arrow"><i class="icon-corner-down-right text-decent"></i></div>

                <div class="col col-step">
                    <sqx-dropdown canSearch="false" [items]="openSteps" [(ngModel)]="openStep">
                        <ng-template let-target="$implicit"> <i class="icon-circle" [style.color]="target.values.color"></i> {{ target.name }} </ng-template>
                    </sqx-dropdown>
                </div>

                <div class="col ps-2">
                    <button class="btn btn-outline-secondary" (click)="addTransition(openStep.name)"><i class="icon-plus"></i></button>
                </div>
            </div>
        }

        <div class="row step-prevent-updates g-0 align-items-center">
            <div class="col col-arrow"></div>

            <div class="col col-step text-right">
                <div class="form-check">
                    <input
                        class="form-check-input step-prevent-updates-checkbox"
                        id="preventUpdates_{{ step.name }}"
                        [disabled]="!!disabled"
                        [ngModel]="step.values.noUpdate"
                        (ngModelChange)="changeNoUpdate($event)"
                        type="checkbox" />
                    <label class="form-check-label" for="preventUpdates_{{ step.name }}">
                        {{ "workflows.preventUpdates" | sqxTranslate }}
                    </label>
                </div>
            </div>

            @if (step.values.noUpdate) {
                <div class="col-auto col-label">
                    <span class="text-decent">{{ "workflows.syntax.when" | sqxTranslate }}</span>
                </div>

                <div class="col col-step-expression">
                    <input
                        class="form-control"
                        [class.dashed]="!step.values.noUpdateExpression"
                        [disabled]="!!disabled"
                        [ngModel]="step.values.noUpdateExpression"
                        (ngModelChange)="changeNoUpdateExpression($event)"
                        [ngModelOptions]="onBlur"
                        placeholder="{{ 'workflows.syntax.expression' | sqxTranslate }}"
                        spellcheck="false" />
                </div>

                <div class="col-auto col-label">
                    <span class="text-decent">{{ "workflows.syntax.for" | sqxTranslate }}</span>
                </div>

                <div class="col col-roles">
                    <sqx-tag-editor
                        allowDuplicates="false"
                        [disabled]="!!disabled"
                        [itemsSource]="roles"
                        [ngModel]="step.values.noUpdateRoles"
                        (ngModelChange)="changeNoUpdateRoles($event)"
                        [ngModelOptions]="onBlur"
                        placeholder="{{ 'common.role' | sqxTranslate }}"
                        styleDashed="true"
                        styleScrollable="true" />
                </div>

                <div class="col col-button"></div>
            }
        </div>

        <div class="row step-validate g-0 mt-2 mb-4 align-items-center">
            <div class="col col-arrow"></div>

            <div class="col">
                <div class="form-check">
                    <input
                        class="form-check-input step-validate-checkbox"
                        id="validate_{{ step.name }}"
                        [disabled]="!!disabled"
                        [ngModel]="step.values.validate"
                        (ngModelChange)="changeValidate($event)"
                        type="checkbox" />
                    <label class="form-check-label" for="validate_{{ step.name }}"> {{ "workflows.validate" | sqxTranslate }} </label>
                </div>
            </div>
        </div>
    </div>
</div>
